 window.addEventListener('load', function() {
     //配置
     var config = {
         vx: 4, //小球x轴速度,正为右，负为左
         vy: 4, //小球y轴速度
         height: 2, //小球高宽，其实为正方形，所以不宜太大
         width: 2,
         count: 200, //点个数
         color: "121, 162, 185", //点颜色
         stroke: "130,255,255", //线条颜色
         dist: 6000, //点吸附距离
         e_dist: 20000, //鼠标吸附加速距离
         max_conn: 10 //点到点最大连接数
     }

     //调用
     CanvasParticle(config);

     // 数据渲染
     // 定义数据源
     let data = [
         { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
         { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
         { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
     ]
     data.forEach(function(v, i) {
         let lis = document.createElement('li')
         lis.innerHTML = v.times
         if (i == 0) {
             lis.className = 'hei active'
         } else {
             lis.className = 'hei'

         }
         rightl.appendChild(lis)
         rightN.innerHTML = data[0].price
         rightn.innerHTML = data[0].unitPrice
     })
     let hmp = document.querySelectorAll('.hei')
     console.log((hmp));

     hmp.forEach(function(u, i) {
         u.addEventListener('click', function() {
             //  点击时文本内容等于数据源索引的相应值
             rightN.innerHTML = data[i].price
             rightn.innerHTML = data[i].unitPrice
             for (let i = 0; i < hmp.length; i++) {
                 hmp[i].className = "hei"
             }
             u.className = 'hei active'
         })
     })



 })